<template>
	<view class="page">
		<view class="top">
			<view class="search" v-if="category.length>0">
				<navigator class="input" :url="'/subpkg/blog-search/blog-search?category_id=' + category_id" hover-class="none">
					<iconfont type="search"></iconfont>
					<text>点此搜索</text>
				</navigator>
			</view>
			<!-- 导航 -->
			<view class="navbar" :class="showNavFloat ? 'floatbar' : ''">
				<view class="menu" v-if="category.length > 0">
					<view class="category">
						<scroll-view :scroll-x="true" :scroll-with-animation="true" :scroll-into-view="scroll_category_id" @scroll="navFloatShow()">
							<view
								class="item"
								v-for="(item, index) in category"
								:key="index"
								:class="category_id == item.id ? 'current' : ''"
								:id="'category_id-' + index"
								:style="'width:' + (category.length <= 4 ? 100 / category.length + '%' : '')"
								@tap="categoryChange(item.id, index)"
							>
								<view class="text">
									<text>{{ item.name }}</text>
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="list" style="margin-top: -3rpx;" @tap="menuShow(!showMenu)"><iconfont type="menu-01"></iconfont></view>
				</view>
			</view>
			
			
			<view class="menu-block fade-in" v-show="showMenu" style="margin-top: 180rpx;">
				<view class="list">
					<text
						class="item"
						v-for="(item, index) in category"
						:key="index"
						:class="category_id == item.id ? 'current' : ''"
						:id="'category_id-' + (index + 1)"
						@tap="categoryChange(item.id, index)"
					>
						{{ item.name }}
					</text>
				</view>
			</view>
			
		</view>
		<view class="content">
			
			
			
			<!--内容区-->
			<view id="u-dropdown">
				<swiper :current="tabIndex" @change="tabChange"  :style="swiperHeight" class="swiperClass">
					<swiper-item v-for="(content,index) in category" :key="index" >
						<view  :id="'content-wrap' + content.id">
						   <Content :searchText="type" :content="content.name" ref="contentRef" @calHeight="setSwiperHeight"></Content>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!--内容区结束-->
			
			
		</view>
		
		<view class="add_btn" @click="gotoAddRecord">
			<text class="add_btn_txt">+</text>
		</view>
	</view>
</template>

<script>
import iconfont from '@/components/iconfont/iconfont.vue';
import Content from '../../components/home/content.vue'
export default {
	components: {
		iconfont,
		Content
	},
	data() {
		return {
			isBlank:false,
			type:'前端',
			tabIndex: undefined,	//选中标签栏的序列
			scroller: {},
			optUp: { auto: true, onScroll: true, page: { size: 20 }, empty: { tip: '暂无文章~' } },
			category_id: undefined,
			category_index: 0,
			scroll_category_id: 'scroll_category_id_0',
			currentSliderIndex: 0,
			category: [],
			swiperHeight:'height:0px',
			showMenu: false,
			slider: [],
			list: [],
			showNoData: false,
			showPageLoading: true,
			showNavFloat: false,
			navBarHeight: ''
		};
	},
	onShow() {
		 this.getCategory();
	},
	onShareAppMessage() {
		return {
			path: '/pages/home/home',
			success: function(e) {},
			title: 'Java掌上资讯'
		};
	},

	onLoad(e) {
		uni.showShareMenu({
			menus:["shareAppMessage","shareTimeline"]
		});
		this.getCategory();
	},

	onPullDownRefresh() {
	        	console.log('-----------------刷新-------')
				this.$refs.contentRef[0].open();
				uni.stopPullDownRefresh();
	},
	methods: {
		/*初始化滚动*/
		initScroller(scroller) {
			this.scroller = scroller;
		},
/*切换导航*/
		categoryChange(category_id, index) {
			console.log('----',category_id);
			this.showMenu = false;
			this.category_index = index;
			this.tabIndex = index;
			this.category_id = category_id;
			var nextIndex = index - 1;
			nextIndex = nextIndex <= 0 ? 0 : nextIndex;
			this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
			this.type=this.category[index].name;
			
			this.$refs.contentRef[0].open();
			console.log('------this.type------ddddsss',this.type)
		},
		
		tabChange(e) {
			const index = e.detail.current;
			const category_id = this.category[index].id;
			console.log('--detail--', e.detail);
			this.tabIndex = index;
			console.log('----',category_id);
			this.showMenu = false;
			this.category_index = index;
			this.category_id = category_id;
			var nextIndex = index - 1;
		
			nextIndex = nextIndex <= 0 ? 0 : nextIndex;
			this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
			this.type=this.category[index].name;
			this.$refs.contentRef[index].open();
		},
		//动态设置swiper的高度
		  setSwiperHeight(size) {
					let _this=this
						if(size==0){
							_this.isBlank = true;			  
						}else{
							_this.isBlank = false;		
						}
				           let height=""
				           const query = uni.createSelectorQuery()
				           query.select('#u-dropdown').boundingClientRect()
				           query.selectViewport().scrollOffset()
				           query.exec(function(res){
				            height=uni.getSystemInfoSync().screenHeight
							
							  console.log('screenHeight', uni.getSystemInfoSync().screenHeight);
				              console.log(' res[0].top ',  res);
				           _this.swiperHeight ='height:'+ (height-res[0].top)+'px';
				            console.log('打印高度', _this.swiperHeight);
							console.log('_this.isBlank ',_this.isBlank)
				            // console.log('打印demo的元素的信息',res);
				           })
		  },
		/*刷新数据*/
		refreshData() {
			uni.showLoading({
				title: '刷新中'
			});
		},
	gotoAddRecord(){
				var user  = uni.getStorageSync('userKey');
				var authorization = uni.getStorageSync('authorization');
				if(authorization==''||authorization==undefined||user==''||user==undefined){
					uni.navigateTo({
						url:'../login/login?backpage=../../subpkg/add-blog/add-blog&backtype=1&classify1='+this.web
					})
					return false;
				}
				
				
				uni.navigateTo({
					url:'../../subpkg/add-blog/add-blog?classify1='+this.web
				})
			},
		/*加载数据*/
		loadData() {
			this.slider = [];
			this.list = [];
			this.currentSliderIndex = 0;
		},
		async getCategory(){
			console.log('----------category_index',this.category_index);
			
			const {data:res} =await uni.$http.get('/sys_tabbar/list_by_type?type=javapda');
			if (res.code == 0) {
				this.category = res.data;
				if (this.category_index > -1) {
					let nextIndex = this.category_index - 1;
					nextIndex = nextIndex <= 0 ? 0 : nextIndex;
					this.scroll_category_id = `category_id-${nextIndex}`; //动画滚动,滚动至中心位置
					//默认是第一个tab
					this.category_id = this.category[0].id;
				}
			}
		},
		
		/*广告切换*/
		sliderChange: function(e) {
			this.currentSliderIndex = e.detail.current;
		},

		/*滚动时导航栏浮动*/
		navFloatShow(scroller) {
			if (scroller) {
				if (scroller.scrollTop > 60) {
					if (!this.showNavFloat) {
						this.showNavFloat = true;
					}
				} else {
					if (this.showNavFloat) {
						this.showNavFloat = false;
					}
				}
			}
		},
		/*菜单框展示*/
		menuShow(value) {
			this.showMenu = value;
		},
		/*隐藏导航浮动*/
		navFloatHide() {
			this.showNavFloat = false;
		}
	}
};
</script>

<style scoped lang="scss">
page {
	 height: 100%;
}
.page {
	padding-bottom: 180rpx;
}
.content {
	padding-top: 190rpx;
}

/*头部*/
.top {
	background: white;
	position: fixed;
	z-index: 99999;
	/*页面标题*/
	.page-title {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90rpx;
		text-align: center;
		border-bottom: 1rpx solid #efefef;
		z-index: 9999;
		line-height: 1;
		image {
			height: 50rpx;
			width: 280rpx;
			margin-left: -35rpx;
		}
	}

	/*搜索*/
	.search {
		padding: 24rpx 24rpx 0 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.logo {
			height: 60rpx;
			width: 474rpx;
			margin-right: 30rpx;
		}
		.input {
			display: flex;
			align-items: center;
			height: 70rpx;
			width: 100%;
			background: #f5f5f5;
			border-radius: 34rpx 34rpx 30rpx 34rpx;
			/deep/ .icon {
				margin-left: 28rpx;
				color: #aaaaaa;
				font-size: 32rpx;
				line-height: 1;
			}
			text {
				margin-left: 14rpx;
				font-size: 30rpx;
				color: #aaaaaa;
				line-height: 1;
			}
		}
		.user{
			display: flex;
			align-items: center;
			/deep/ .icon {
				margin-left: 24rpx;
				color: #aaaaaa;
				font-size: 38rpx;
				margin-top: 4rpx;
			}
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-left: 25rpx;
			}
		}
	}

	/* 顶部navbar */
	.navbar {
		/*分类*/
		.menu {
			position: relative;
			height: 80rpx;
			white-space: nowrap;
			padding: 15rpx 0 6rpx;
			z-index: 10;
			display: flex;
			align-items: center;
			justify-content: space-between;
			/*分类*/
			.category {
				width: 650rpx;
				margin-left: 30rpx;
				white-space: nowrap;
				position: relative;
				scroll-view {
					width: auto;
					.item {
						position: relative;
						display: inline-block;
						margin: 0 31rpx 0;
						height: 80rpx;
						text-align: left;
						padding-top: 7rpx;
						//line-height: 80rpx;
						&:first-child {
							margin-left: 10rpx;
						}
						&:after {
							content: '';
							width: 0;
							height: 0;
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
							transition: 0.3s;
						}
						.text {
							position: relative;
							width: auto;
							height: auto;
							line-height: auto;
							display: inline-block;
							text {
								font-size: 36rpx;
								font-weight: bold;
								color: #555;
							}
							image {
								position: absolute;
								top: 16rpx;
								right: -14rpx;
								width: 50rpx;
								height: 50rpx;
								display: none;
							}
						}
					}
					.current {
						&:after {
							width: 50%;
						}
						.text {
							text {
								font-size: 40rpx;
								font-weight: bold;
								color: #262626;
							}
							image {
								display: block;
							}
							border-bottom: 6rpx solid #8cc7b5;
						}
					}
				}
			}
			.list {
				width: 70rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				//box-shadow: -4rpx 0 0 #e9ebee;
				//box-shadow: -2px 0 0 #262626;
				/deep/ .icon {
					font-size: 36rpx;
					margin-top: -6rpx;
				}
			}
		}
	}
}
.menu-block {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	border-bottom: 1rpx solid #f5f5f5;
	padding: 20rpx 0 50rpx;
	z-index: 100;
	width: 100%;
	//box-shadow: 0 15rpx 10rpx -15rpx #e9ebee;
	.list {
		padding-left: 10rpx;
		text {
			background: #f5f7fa;
			border-radius: 8rpx;
			font-size: 32rpx;
			margin: 12rpx 20rpx;
			display: inline-block;
			height: 72rpx;
			width: 144rpx;
			line-height: 72rpx;
			text-align: center;
		}
		.current {
			color: #fff;
			background: #8cc7b5;
			//font-size: 32rpx;
		}
	}
}

.scroll {
	height: 100%;
}

/*幻灯片广告 */
.swiper {
	height: 350rpx;
	margin: 14rpx 24rpx 0;
	image {
		height: 350rpx;
		width: 100%;
		border-radius: 15rpx;
		//box-shadow: 0 0 12px #dddee1;
	}
	.current {
		width: 97%;
		height: 350rpx;
		margin: 1.5% 1.5%;
		transition: all 0.2s ease-in 0s;
	}
	.item {
		position: relative;
		.title {
			position: absolute;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			text {
				margin: 7% 6%;
				display: flex;
				align-items: center;
				//background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
				//background-image: linear-gradient(90deg,rgba(255, 181, 19,.8),rgba(255, 181, 19,.2));
				color: #fff;
				display: -webkit-box;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				font-size: 34rpx;
				padding: 14rpx 20rpx;
				max-width: 610rpx;
				line-height: 1.3;
				border-radius: 5rpx;
			}
		}
	}
}

/*浮动navbar*/
.floatbar {
	//border-bottom: 1rpx solid #e8e8e8;
	box-shadow: 0px 2px 2px -2px #e8e8e8;
	padding-bottom: 12rpx;
}

/deep/ .no-data {
	margin-top: 200rpx;
}

.swiperClass{
	min-height: 600rpx;
}
  .add_btn{
  	text-align: center;
  	position: fixed;
  	opacity: 0.5;
  	bottom: 50rpx;
  	right: 50rpx;
  	background-color: #CD5C5C;
  	border-radius: 50%;
  	width: 120rpx;
  	height: 120rpx;
  }
  
  .add_btn_txt{
  	font-size: 100rpx;
  	color: #FFFFFF;
  	line-height: 120rpx;
  }

</style>
